<template>
  <div>
    <el-menu-item @click="() => handleMenuClick(item)" v-if="!item.Children || (item.Children && item.Children.length === 0)" :index="item.Path">
      {{ item.name }}
    </el-menu-item>

    <el-sub-menu v-else :index="item.Path">
      <template #title>
        <el-icon><document /></el-icon>
        <span>{{ item.name }}</span>
      </template>
      <div v-for="(child, index) in item.Children" :key="index">
        <DynamicMenu :item="child" />
      </div>
    </el-sub-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'DynamicMenu',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  setup() {
    const router = useRouter(); // 获取 router 实例

    const handleMenuClick = (item: any) => {
      console.log('Menu item clicked:', item);
      router.push({ name: item.Name }); // 根据 item 的 name 路由跳转
    };
    return {
      handleMenuClick
    };
  }
});

</script>